<!--  -->
<template>
  <div class="evaluate">
       <!-- <HeaderTop title="发布评价"></HeaderTop> -->
       <ul>
            <li v-for="(order,index) in orderList" :key="index">
                <div class="evaluate-title">
                    <img class="avatar" src="../../assets/img/tx.jpg" alt="">
                    <p>描述相符</p>
                    <van-rate v-model="order.starLevel" :size="50" color="red" class="star"/>
                </div>

                <div class="evaluate-from">
                    <x-textarea class="text" name="detail" v-model="order.buyerRemark" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧" :show-counter="false"></x-textarea>
                </div>

                <div class="form-group">
                    <!-- <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
                        <template v-if="item.status === 'finished'">
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <img class="delImg" src="./img/shanchu.png" alt="" @click="handleRemove(item)">
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div> -->
                    <UploadFile v-model="order.files" :maxLength="3" />
                </div>
            </li>
       </ul>

       <div class="refund-btn">
          <button @click.prevent="submitEvaluate">发布</button>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import UploadFile from './UploadFile'
import { XTextarea } from 'vux'
import {mapState} from 'vuex'
export default {
  data () {
    return {
        files:'',
        orderList:[],
        starValue:4,
        evaluateValue:'',

        disabled:false,
        picFile:[],

        formData:new FormData(),
        imgs: {},
        imgLen:0,

        defaultList: [
            {
                'name': 'a42bdcc1178e62b4694c830f028db5c0',
                'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
            },
            {
                'name': 'bc7521e033abdd1e92222d733590f104',
                'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
            }
        ],
        imgName: '',
        visible: false,
        uploadList: []
    };
  },

  components: {
    // HeaderTop,
    XTextarea,
    UploadFile
  },

  computed: {
      ...mapState(['userInfo'])
  },
  async mounted(){
    // this.uploadList = this.$refs.upload.fileList;
    this.orderInfoId = this.$route.query.id
    this.userId = this.userInfo.userInfo.id
    this.token = this.userInfo.token
    console.log(this.orderInfoId,this.userId,this.token)
    // 获取评价订单的信息
    const result = await this.API.reqOrderDetail({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
    console.log('要评价的订单信息',result)
    if(result.retCode === '000'){
        result.retData.orderDetailList.forEach(item=>{
            item.files = []
            item.buyerRemark = ''
            item.starLevel = 4
        })
        this.orderList = result.retData.orderDetailList
        console.log('订单列表',this.orderList)
    }
  },
  methods: {
    submitEvaluate(){
        // console.log(this.orderList)
        // const formData = new FormData()
        const params = {
            // userId:this.userId,
            // token:this.token,
            // orderInfoId:this.orderInfoId,
            // picUrl1:this.orderList[0].files[0],
            // picUrl2:this.orderList[0].files[1],
            // picUrl3:this.orderList[0].files[2],
            // goodsId:this.orderList[0].id,
            // buyerRemark:this.evaluateValue,
            // starLevel:this.starValue,
        }
        this.orderList.forEach(async (item, index) => {
            
            const formData = new FormData()
            formData.append('userId', this.userId)
            formData.append('token', this.token)
            formData.append('orderInfoId', this.orderInfoId)
            formData.append('goodsId', item.goodsId)
            formData.append('buyerRemark', item.buyerRemark)
            formData.append('starLevel', item.starLevel)
            for (let key in item.files) {
                console.log('111111',item.files[key])
                formData.append(`picUrl${Number(key)+1}`, item.files[key])
            }
            if (index == this.orderList.length - 1) {
                formData.append('flag', 1)
            }
            const result = await this.API.reqEvaluate(formData)
            console.log(result)
            if(result.retCode === '000'){
                this.$toast('评价成功')
                this.$router.push({path:'/myorder',query:{id:0}})
            }
        })
    }
  }
}

</script>

<style>
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    /* .ivu-upload-input{
        display: inline-block;
        opacity: 0;
    } */
</style>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.evaluate
    touch-action: none;
    width 100%
    height 100%
    // margin-top 45px
    .evaluate-title
        font-size 15px
        display flex
        width 100%
        height 50px
        align-items center
        bottom-border-1px(#F9F9F9)
        background #fff
        .avatar
            width 30px
            height 30px
            border-radius 5px
            margin 0 15px
        .star
            margin-left 15px
    .evaluate-from
        background #fff
        .text
            height 110px
            font-size 14px
    .form-group
        .demo-upload-list
            display inline-block
            width 80px
            height 80px
            text-align center
            line-height 80px
            border 1px solid transparent
            border-radius 4px
            overflow hidden
            position relative
            background #fff
            box-shadow 0 1px 1px rgba(0,0,0,.2)
            margin-right 2px
            img
                width 100%
                height 100%
            .demo-upload-list-cover
                width 10px
                height 10px
                position absolute
                top -32px
                right 5px
                img
                    width 10px
                    height 10px
                    color #fff
                    margin 0 2px
        .upload-imgs
            overflow hidden
            font-size 0
            li
                position relative
                width 70px
                height 70px
                font-size 14px
                display inline-block
                padding 10px
                margin-right 25px
                border 2px dashed #cccccc
                text-align center
                vertical-align middle
                &:hover
                    border-color green
                .add
                    width 70px
                    height 70px
                .upload
                    position absolute
                    top 0
                    bottom 0
                    right 0
                    left 0
                    width 70px
                    height 70px
                    opacity 0
                .img
                    position relative
                    width 70px
                    height 70px
                    line-height 70px
                    img 
                        vertical-align middle
                        .close
                            display none
                &:hover .img .close
                    display block
                    position absolute
                    right -6px
                    top -10px
                    line-height 1
                    font-size 22px
                    color #ccc
    .refund-btn
        margin-top 20px
        display flex
        justify-content center
        button
            outline none
            border: 1px solid transparent
            height 40px
            line-height 40px
            width 305px
            font-size 14px
            background #145B3E
            color #ffffff
            border-radius 30px
</style>